<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令</title>
</head>
<body>
<div id="app">
    <input @click="add" type="button" value="添加数据">
    <input @click="remove" type="button" value="移除数据">

    <ul>
        <!-- 语法是 (item, index) in 数据-->
        <li v-for="(item,index2) in arr">
            {{index2 + 1}} 校区 : {{item}}
        </li>
    </ul>

    <h2 v-bind:title="item.name" v-for="item in vegetables">
        {{item.name}}
    </h2>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    let vue = new Vue({
        el: "#app",
        data: {
            arr: ["上海", "北京", "广州", "深圳"],
            vegetables: [
                {name: "西红柿炒蛋"},
                {name: "青椒肉丝"}
            ]
        },
        methods: {
            add: function () {
                this.vegetables.push({name: "红烧肉"})
            },
            remove: function () {
                this.vegetables.shift();
            }
        }
    });
</script>
</body>
</html>